<template>
	<view class="flex-col page">
		<u-navbar title="公告"  :autoBack="true" bgColor="#fff" placeholder="true"></u-navbar>
		<view class="flex-col justify-start items-end image-wrapper">

		</view>
		<view class="flex-col section">
			<view class="flex-row group">
				<image class="image_2" src="https://www.dlxx.top/static/images/5551963fefd1732dcdb8864b96332300.png" />
				<text class="text text_2 ml-11">公告</text>
			</view>
			<view class="flex-col mt-4-5">
				<u-list @scrolltolower="scrolltolower" :height="height">
					<view class="flex-row items-center list-item" v-for="(item, index) in list" :key="index"
						@click="detail(item)">
						<image class="shrink-0 image_3" :src="$util.img(item.image)" />
						<view class="ml-12 flex-col flex-1">
							<text class="font text text_3 u-line-1">{{item.title}}</text>
							<text class="font_2 text mt-14-5 u-line-1">{{item.desc}}</text>
							<text class="font_3 text mt-14-5">{{item.create_time}}</text>
						</view>
					</view>
				</u-list>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				page: 1,
				page_size: 10,
				list: [],
				height: '',
			};
		},
		onLoad() {
			this.getList();
			uni.getSystemInfo({
				success: (e) => {
					var windowHeight = e.windowHeight;
					var height = windowHeight - 44 - 195;
					this.height = height;
				},
			});
		},
		methods: {
			getList() {
				this.$api.sendRequest({
					url: '/api/index/getNewsList',
					data: {
						page: this.page,
						page_size: this.page_size
					},
					success: res => {
						console.log(res.data)
						if (res.code == 1) {
							this.list = [...this.list, ...res.data.data];
						}
					}
				});
			},
			scrolltolower() {
				this.page = this.page + 1;
				this.getList();
			},
			detail(item) {
				uni.setStorageSync('newsDetail', item);

				uni.navigateTo({
					url: '/pages/news/detail'
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.mt-4-5 {
		margin-top: 9rpx;
	}

	.mt-14-5 {
		margin-top: 29rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.mt-2-5 {
		margin-top: 5rpx;
	}

	.mt-3-5 {
		margin-top: 7rpx;
	}

	.page {
		background-color: #f5f5f5;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;

		.image-wrapper {
			padding: 34rpx 0 20rpx;
			background-color: #ffffff;

			.image {
				margin-right: 10rpx;
				width: 674rpx;
				height: 141rpx;
			}
		}

		.section {
			margin: 16rpx 10rpx 0;
			padding: 32rpx 22rpx 0;
			background-color: #ffffff;
			border-radius: 10rpx;

			.group {
				padding: 0 5rpx;

				.image_2 {
					width: 19rpx;
					height: 29rpx;
				}

				.text_2 {
					color: #011613;
					font-size: 28rpx;
					font-family: PingFangSC;
					line-height: 28rpx;
				}
			}

			.list-item {
				padding: 24rpx 0;
				border-bottom: solid 3rpx #eeeeee;

				.image_3 {
					border-radius: 6rpx;
					width: 140rpx;
					height: 140rpx;
				}

				.font {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 23rpx;
					color: #011613;
				}

				.text_3 {
					// margin-right: 31rpx;
				}

				.font_3 {
					font-size: 20rpx;
					font-family: PingFangSC;
					line-height: 16rpx;
					color: #999999;
				}
			}
		}

		.section_2 {
			position: fixed;
			bottom: 0;
			width: 100%;
			padding-bottom: 45rpx;
			background-image: url('https://www.dlxx.top/static/images/0d7b8433face4c26f310aaff3feab4ca.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.equal-division {
				padding-top: 6rpx;

				.group_3 {
					flex: 1 1 250rpx;

					.image_4 {
						width: 48rpx;
						height: 48rpx;
					}

					.text_4 {
						color: #051a17;
						line-height: 20rpx;
					}

					.text_5 {
						color: #00806b;
						line-height: 20rpx;
					}

					.text_6 {
						line-height: 20rpx;
					}
				}

				.equal-division-item {
					padding: 12rpx 0 12rpx;
				}
			}
		}

		.font_2 {
			font-size: 20rpx;
			font-family: PingFangSC;
			line-height: 21rpx;
			color: #011613;
		}

		.text {
			text-transform: uppercase;
		}
	}
</style>